<template>
  <div>
    <!-- 插槽：
    1.在子组件中需要自定义的地方使用<slot />占位
    2.在父组件中使用子组件,开闭标签中间传入要自定义的结构
    好处：让组件更灵活
     -->
    <!-- 
      具名插槽：
      1.在slot上使用name来区分不同的插槽
      2.传入时使用<template></template>包裹住要传入的结构,使用v-slot：插槽名来指定具体要分发的插槽
      3.v-slot：可以使用#来代替
      -->
    <MyDialog>
      <template #header>
        <h1>闭嘴吧你</h1>
        <h2>w哈哈哈哈</h2>
        <h3>啊啊啊啊啊</h3>
      </template>
      <template #content>
        <h4>go away</h4>
      </template>
      <!-- 
        作用域插槽
        1.在slot上绑定属性
        2.在父组件中使用插槽时,template上通过v-slot:插槽名="变量名"
        注意:绑定在slot上的所有属性,会被收集成一个对象,例如{yes:'' , no:''}
        obj变量只能在template中使用,超出这个范围就无法使用了,所以叫做作用域插槽
       -->
      <template #bottom="obj">
       <button>{{obj.yes}}</button>
       <button>{{obj.no}}</button>
      </template>
    </MyDialog>
    <MyDialog>
      <template #content>
        <h1>厚礼蟹</h1>
      </template>
    </MyDialog>
    <MyDialog> </MyDialog>
  </div>
</template>

<script>
import MyDialog from "./components/MyDialog.vue";
export default {
  name: "VueDemoApp",
  components: { MyDialog },
  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
</style>